---
title: Migration from version 1.x
---

import { Card, Tabs, TabItem, CardGrid, Icon } from '@astrojs/starlight/components'
import Seo from '../../../components/Seo.astro'

<Seo
    seo={{
        title: 'Migration from 1.x',
        description: 'How to migrate from version 1.x'
    }}
>
   
    Unistyles 2.0 introduces several breaking changes, most of which are easy to resolve.

:::tip
    Before starting your upgrade process, ensure that you have the latest version of the library installed.
:::

    Additionally, remember that Unistyles utilizes native modules, so it's necessary to run `pod install` after upgrading.

    For more information, visit [here](/start/setup#2-finish-installation).

    ### 1. Remove your `UnistylesTheme`

    The library now facilitates `C++` with `HostObject` eliminating the need for React Context.
    Additionally, a simpler API has been introduced to change themes at any time. Therefore, you can now unwrap your app from `UnistylesTheme`.

    ```diff lang="tsx"
    //App.tsx
    import React from 'react'
    -import { UnistylesTheme } from 'react-native-unistyles'
    -import { theme } from './theme'

    export const App: React.FunctionComponent = () => (
    -  <UnistylesTheme theme={theme}>
        // Your App
    -  </UnistylesTheme>
    )
    ```

    ### 2. Remove `createUnistyles`

    With the power of TypeScript types, you no longer need to use `createUnistyles`. There is also a new way to register
    necessary configs. You can safely remove these lines of code. 

    ```diff lang="tsx"
    // unistyles.ts

    -import { createUnistyles } from 'react-native-unistyles'
    import { breakpoints } from './breakpoints'
    import { theme } from './theme'

    -export const {
    -   createStyleSheet,
    -   useStyles,
    -} = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
    ```

    ### 3. Breakpoints

    In version 2.0, breakpoints are optional. If your app wasn't using them, you can delete your breakpoints object. 
    For those who were using breakpoints, there are no breaking changes.

    ### 4. Theming

    You can use the same themes. You just need to give them unique names, as explained in the later steps.

    ### 5. TypeScript types

    In step 2, you removed `createUnistyles`. This factory was previously used to pass types to the core of the library. 
    To register your types now, you need to override the library types with the following syntax:

    ```diff lang="tsx"
    // unistyles.ts
    import { breakpoints } from './breakpoints'
    +import { lightTheme, darkTheme, otherTheme } from './theme'

    +type AppBreakpoints = typeof breakpoints
    +type AppThemes = {
    +    light: typeof lightTheme
    +    dark: typeof darkTheme
    +    other: typeof otherTheme
    +}

    +declare module 'react-native-unistyles' {
    +   export interface UnistylesBreakpoints extends AppBreakpoints {}
    +   export interface UnistylesThemes extends AppThemes {}
    +}
    ```

    Use your unique theme names to create an `AppThemes` type. If you don't use themes or breakpoints, you can skip this step. 
    It's only required if you want to achieve perfect IntelliSense integration across your app.

    ### 6. Register your themes and breakpoint with `UnistylesRegistry`

    ```diff lang="tsx"
    // unistyles.ts
    +import { UnistylesRegistry } from 'react-native-unistyles'
    import { breakpoints } from './breakpoints'
    import { lightTheme, darkTheme, otherTheme } from './theme'

    type AppBreakpoints = typeof breakpoints
    type AppThemes = {
        light: typeof lightTheme
        dark: typeof darkTheme
        other: typeof otherTheme
    }

    declare module 'react-native-unistyles' {
        export interface UnistylesThemes extends AppThemes {}
        export interface UnistylesBreakpoints extends AppBreakpoints {}
    }

    +UnistylesRegistry
    +    .addThemes({
    +        light: lightTheme,
    +        dark: darkTheme,
    +        otherTheme: otherTheme
    +    })
    +    .addBreakpoints(breakpoints)
    +    .addConfig({
    +        adaptiveThemes: true
    +    })
    ```

:::caution
  In order to run the code don't forget to import the `unistyles.ts` file somewhere in your app eg. in the `App.tsx` file.

  ```diff lang="ts"
  import '../unistyles'
  ```
:::

    If you want to learn more about `UnistylesRegistry` follow [this](/reference/unistyles-registry/) guide.

    ### 7. Change your imports

    This is the most tedious part, but it guarantees perfect TypeScript types throughout your app.
    You can now import `createStyleSheet` and `useStyles` directly from the library.

    ```diff lang="tsx"
    -import { useStyles, createStyleSheet } from 'lib/styles'
    +import { useStyles, createStyleSheet } from 'react-native-unistyles'
    ```

    ### 8. `createStyleSheet` and `useStyles`

    Both have been improved with additional features and without introducing any breaking changes!

    ### 9. Media queries

    Media queries in version 1.x were far from perfect. Users had to follow a string-based template to make them work. 
    In version 2.0, old media queries are deprecated and should be updated to the following syntax:

    ```diff lang="tsx"
    +import { mq } from 'react-native-unistyles'

    // your component code

    const stylesheet = createStyleSheet(theme => ({
        container: {
            width: {
    -           ':w[200, 500]:h[100]': 0,
    -           ':w[, 200]': 100
    +           [mq.width(200, 500).and.height(100)]: 0,
    +           [mq.only.width(null, 200)]: 100
            }
        }
    }))
    ```

    To learn more about `mq` utility refer to [this](/reference/media-queries/) guide.

    ### 10. That's all, enjoy tons of new features with crazy performance!

</Seo>
